<template>
<!-- 用户未填写过表单页面 -->
  <div class="AdminForm">
      <AdminFilled v-if="areaMsg"/>
      <div class="adminFormBox" v-else>
        <!-- 内容通知 -->
        <div class="notice">
            <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" wrapable :scrollable="false">
            温馨提示：填写了所在社区才可以享受所在社区的充电优惠哦
            </van-notice-bar>
        </div>
        <!-- 社区选择 -->
        <div class="choose_commiunty">
            <van-form @submit="onSubmit">
            <!-- 选择地区城市 -->
            <van-field
                readonly
                clickable
                name="city"
                :value="value"
                label="地区选择"
                placeholder="点击选择省市区"
                @click="showArea = true"
            />
            <!-- 选择地区的弹出层 -->
            <van-popup v-model="showArea" position="bottom">
                <van-area
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
                />
            </van-popup>
            <!-- 自己填写所在社区 -->
            <van-field
                v-model="community"
                name="community"
                label="所在社区"
                placeholder="请填写居住社区"
                :rules="[{ required: true }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
            </van-form>
        </div>

      </div>
  </div>
</template>

<script>
import { post_community } from '@/api/index';
import { areaList } from '@vant/area-data';
import AdminFilled from '@/components/AdminUser/components/AdminFilled.vue'
export default {
  name: 'AdminForm',
  props: {
    loginname: String,
  },
  components: {
    AdminFilled
  },
  data() {
    return {
      community:'',
      value: '',
      showArea: false,
      // areaList: {}, // 数据格式见 Area 组件文档
      areaList,
      areaMsg: null,
    };
  },
  created() {
		
  },
  mounted(){
    
  },
  methods:{
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },   
    async onSubmit(values) {
      let username = this.loginname
      let res = await post_community({...values,username});
      console.log(res.data);
      this.$store.commit('changeAreaMsg', {areaMsg: res.data.areaMsg})
      this.areaMsg = this.$store.state.areaMsg;
      this.$notify({ type: 'success', message: res.data.msg })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .AdminForm{
    text-align: left;
    
    .choose_commiunty{
      margin-top: 110px;
    }
    .notice{
      position: absolute;
      width: 100%;
      left: 0;
      top: 190px;
    }
  }
</style>